/* 全局样式重置 */
* {
	box-sizing: border-box;
}

page {
	background-color: #f5f5f5;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 28rpx;
	line-height: 1.6;
	color: #333;
}

/* 通用布局类 */
.container {
	padding: 20rpx;
}

.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.flex-1 {
	flex: 1;
}

/* 文本样式 */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-primary {
	color: #007aff;
}

.text-success {
	color: #4cd964;
}

.text-warning {
	color: #f0ad4e;
}

.text-error {
	color: #dd524d;
}

.text-grey {
	color: #999;
}

.text-white {
	color: #fff;
}

/* 字体大小 */
.text-xs {
	font-size: 20rpx;
}

.text-sm {
	font-size: 24rpx;
}

.text-base {
	font-size: 28rpx;
}

.text-lg {
	font-size: 32rpx;
}

.text-xl {
	font-size: 36rpx;
}

.text-2xl {
	font-size: 40rpx;
}

/* 字体粗细 */
.font-normal {
	font-weight: normal;
}

.font-medium {
	font-weight: 400;
}

.font-bold {
	font-weight: bold;
}

/* 间距 */
.m-0 { margin: 0; }
.m-1 { margin: 10rpx; }
.m-2 { margin: 20rpx; }
.m-3 { margin: 30rpx; }
.m-4 { margin: 40rpx; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; }
.mt-4 { margin-top: 40rpx; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; }
.mb-4 { margin-bottom: 40rpx; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; }
.ml-3 { margin-left: 30rpx; }
.ml-4 { margin-left: 40rpx; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; }
.mr-3 { margin-right: 30rpx; }
.mr-4 { margin-right: 40rpx; }

.p-0 { padding: 0; }
.p-1 { padding: 10rpx; }
.p-2 { padding: 20rpx; }
.p-3 { padding: 30rpx; }
.p-4 { padding: 40rpx; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 10rpx; }
.pt-2 { padding-top: 20rpx; }
.pt-3 { padding-top: 30rpx; }
.pt-4 { padding-top: 40rpx; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 10rpx; }
.pb-2 { padding-bottom: 20rpx; }
.pb-3 { padding-bottom: 30rpx; }
.pb-4 { padding-bottom: 40rpx; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 10rpx; }
.pl-2 { padding-left: 20rpx; }
.pl-3 { padding-left: 30rpx; }
.pl-4 { padding-left: 40rpx; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 10rpx; }
.pr-2 { padding-right: 20rpx; }
.pr-3 { padding-right: 30rpx; }
.pr-4 { padding-right: 40rpx; }

/* 背景色 */
.bg-white {
	background-color: #fff;
}

.bg-grey {
	background-color: #f5f5f5;
}

.bg-primary {
	background-color: #007aff;
}

.bg-success {
	background-color: #4cd964;
}

.bg-warning {
	background-color: #f0ad4e;
}

.bg-error {
	background-color: #dd524d;
}

/* 边框 */
.border {
	border: 1rpx solid #e9ecef;
}

.border-top {
	border-top: 1rpx solid #e9ecef;
}

.border-bottom {
	border-bottom: 1rpx solid #e9ecef;
}

.border-left {
	border-left: 1rpx solid #e9ecef;
}

.border-right {
	border-right: 1rpx solid #e9ecef;
}

/* 圆角 */
.rounded {
	border-radius: 10rpx;
}

.rounded-lg {
	border-radius: 20rpx;
}

.rounded-full {
	border-radius: 50%;
}

/* 阴影 */
.shadow {
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.shadow-lg {
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
}

/* 按钮样式 */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
	background-color: #007aff;
	color: #fff;
}

.btn-primary:active {
	background-color: #0056b3;
}

.btn-secondary {
	background-color: #f8f9fa;
	color: #333;
	border: 1rpx solid #e9ecef;
}

.btn-secondary:active {
	background-color: #e9ecef;
}

.btn-success {
	background-color: #4cd964;
	color: #fff;
}

.btn-success:active {
	background-color: #3cb85c;
}

.btn-error {
	background-color: #dd524d;
	color: #fff;
}

.btn-error:active {
	background-color: #c9302c;
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 输入框样式 */
.input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f9fa;
	border: 1rpx solid #e9ecef;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
}

.input:focus {
	border-color: #007aff;
	background-color: #fff;
}

.input::placeholder {
	color: #999;
}

/* 卡片样式 */
.card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 列表样式 */
.list-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.list-item:last-child {
	border-bottom: none;
}

.list-item:active {
	background-color: #f8f8f8;
}

/* 头像样式 */
.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 10rpx;
}

.avatar-lg {
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
}

.avatar-circle {
	border-radius: 50%;
}

/* 徽章样式 */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	color: #fff;
	background-color: #ff4757;
}

.badge-success {
	background-color: #4cd964;
}

.badge-warning {
	background-color: #f0ad4e;
}

.badge-primary {
	background-color: #007aff;
}

/* 分割线 */
.divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 20rpx 0;
}

/* 加载状态 */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	color: #999;
}

/* 空状态 */
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 40rpx;
	color: #999;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
}

/* 响应式 */
@media screen and (max-width: 750rpx) {
	.container {
		padding: 15rpx;
	}
	
	.card {
		padding: 20rpx;
		margin-bottom: 15rpx;
	}
}
